<template>
  <div id="view">
    <div class="w1200">
      <p class="guide">
        <router-link to="/machinemarket">算力市场&nbsp;&nbsp;>&nbsp;</router-link>
        <span>合约详情</span>
      </p>
      <div id="mcContent">
        <p class="p1">
          <img src="../common/imgs/btc.png" alt="">
          <img src="../common/imgs/BHP.png" v-if="machine.bhp_power > 0" alt="" style="margin-left: 3px;">
          <span class="mcName">{{machine.name}}</span>
<!--          <span class="lockDays mark" v-if="Number(machine.type) == 10 || Number(machine.type) == 11">不可回购</span>-->
          <span class="lockDays mark">合约期{{machine.regular_date_num}}天</span>
          <span class="lockDays mark" v-if="Number(machine.type) == 11">不包电费</span>
        </p>
        <section id="sec1" class="detailList">
          <div>
            <span class="list_one">
              <span class="list_title">单份价格：</span>
              <span class="price">
                <span v-for="(curPay , curIndex ) in machine.good_deposit" v-if="curPay.pay_currency === 'CNY'">
                    {{Number(curPay.goods_deposit)}}{{curPay.pay_currency}}
                </span>
                <span v-for="(curPay , curIndex ) in machine.good_deposit" v-if="curPay.pay_currency === 'USDT' && curPay.goods_deposit">
                    ≈{{Number(curPay.goods_deposit)}}{{curPay.pay_currency}}
                </span>
              </span>
            </span>
              <span class="list_one">
              <span class="list_title">单份合约算力:</span>
              <span class="color26">
                {{machine.base_power}}T{{machine.more_power_percent > 0 ? '+'+machine.more_power_percent+'%' : '' }}
                <!-- 1T+130%+(0-25)% -->
                </span>
            </span>
            <span class="list_one">
              <span class="list_title">日挖矿产出:</span>
              <span class="color99">约{{machine.predict_income}}CNY/份</span>
            </span>
            <span class="list_one" v-if="machine.bhp_power > 0">
              <span class="list_title">BHP参配算力:</span>
              <span class="color99">{{machine.bhp_power}}T</span>
            </span>
          </div>
          <div>
            <span class="list_one">
              <span class="list_title">单次下单限额:</span>
              <span class="color99">{{machine.maxLimitNum}}T</span>
            </span>
            <span class="list_one">
              <span class="list_title">基础算力:</span>
              <span class="color99">{{machine.base_power}}T</span>
            </span>
            <span class="list_one">
              <span class="list_title">奖励算力:</span>
              <span class="color99">{{ this.accSub(machine.computing_power , machine.base_power) || '' }}T</span>
            </span>
            <span class="list_one">
              <span class="list_title">开挖时间:</span>
              <span class="color99">{{machine.time_income}}&nbsp;</span>
            </span>
            <span class="list_one">
              <span class="list_title">发放方式:</span>
              <span class="color99">日结，次日发放至账户</span>
            </span>
          </div>
          <a href="javascript:void 0;" id="goBuy" @click="openDialog({path : '/classicMachinePay' , query : {machine_id : machine_id },bhp_power : machine.bhp_power})">立即购买</a>
        </section>
        <section id="richText" v-html="machine.desc_pc" v-if="machine.desc_pc"></section>
      </div>
    </div>
    <dialog-iknow ref="digIknow" titles="提示" confirmBtn="我知道了"/>
  </div>
</template>
<script>
  import { getMachineDetail , bhpayMes} from "../http/api";
  export default {
    name: 'classicMachineDetail',
    data(){
      return{
        machine : {} , //矿机信息
        openBhpay : false,//是否关联bhpay
        machine_id : '',
      }
    },
    components: {
      dialogIknow : resolve => { require(['../components/DialogIknow'], resolve) },
    },
    mounted() {
      let machine_id = this.$route.query.machine_id;
      this.machine_id = machine_id;
      let thiz = this;
      let https = [
        getMachineDetail({machine_id : machine_id}).then(res => {
          let data = res.data;
          this.machine = data.machine;
        })
      ];
      this.PromiseAll(https);
    },
    methods:{
      openDialog(param){
        let thiz = this;
        if( !(this.$store.state.uid)){
          require('../common/js/toast').toast('该操作需要登录');
          this.$router.push({path : '/login'});
          return;
        }
        if(Number(param.bhp_power > 0)){
          // if(this.openBhpay){
          //   thiz.$router.push(param);//已绑定bhpay
          // }else {
          //   let html = '<div style="line-height: 170%;font-size: 18px">应平台合规需要，BTC_BHP合约产出的BHP，已在<span style="color: #ffd203">2019年12月30日</span>迁移到BHPay钱包中发放，为确保您的产出正常发放，请下载APP完成BHPay账户关联。</div>';
          //   this.$refs.digIknow.changeContent(html);
          //   this.$refs.digIknow.dialogShow();
          // }
          bhpayMes({noToast : true}).then( res => {
            if( res.code == 200 ){
              thiz.$router.push(param);//已绑定bhpay
            }else{
              let html = '<div style="line-height: 170%;font-size: 18px">应平台合规需要，BTC_BHP合约产出的BHP，已在<span style="color: #ffd203">2019年12月30日</span>迁移到BHPay钱包中发放，为确保您的产出正常发放，请下载APP完成BHPay账户关联。</div>';
              this.$refs.digIknow.changeContent(html);
              this.$refs.digIknow.dialogShow();
            }
          });
        }else{
          thiz.$router.push(param);
        }
      },
    }
  }
</script>
<style lang="less" scoped>
  @import "../common/style/common";
  #view{
    padding-top: 72px;padding-bottom: 90px;
  }
  .guide{
    padding: 21px 0;font-size: 16px;
    >a{
      .colorYellow;
    }
    >span{
      color: #262626;
    }
  }
  #mcContent{
    padding: 40px 28px;background: #fff;min-height: 800px;.borderRadius();
    >.p1{
      padding-bottom: 35px;
      img{
        width: 28px;height: 28px;vertical-align: middle;
      }
      >.mcName{
        line-height: 28px;color: #262626;vertical-align: middle;margin-left: 10px;display: inline-block;font-size: 24px;
      }
      >.mark{
        background: #FFF6EC;.borderRadius;.colorYellow;height: 21px;display: inline-block;line-height: 21px;font-size: 12px;
        padding: 0 7px;margin-left: 11px;vertical-align: middle;
      }
    }
    #sec1{
      padding-bottom: 34px;border-bottom: 1px solid#eee;
      >div{
        .overHidden;
        >.list_one{
          position: relative;float: left;display: inline-block;padding: 0 25px;line-height: 46px;height: 46px;
          &:before{
            content: '';display: block;background: #eee;width: 1px;position: absolute;left: 0;top: 50%;height: 18px;margin-top: -9px;
          }
          &:first-child{
            padding-left: 0;
            &:before{
              display: none;
            }
          }
          >.list_title{
            color: #262626;font-size: 16px;line-height: 46px;
          }
          >.price{
            .colorYellow;font-size: 22px;
          }
          .color26{
            color: #262626;font-size: 16px;
          }
          .color99{
            color: rgba(38, 38, 38, 0.65);font-size: 16px;
          }
        }
      }
      >#goBuy{
        .submit;width: 220px;height: 46px;line-height: 46px;font-size: 18px;margin-top: 34px;
      }
    }
    #richText{
      padding-bottom: 48px;;
    }
  }
</style>
